import { FC } from 'react';
import Index from './layout/Index'
import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
import Login  from "./views/login/Index";
import { Router } from 'express';
// 获取 redux 里面的登录状态
import { useAppSelector } from "./store/hooks";

function App() {
// 拿到登录状态，导航守卫在 React 中不需要，直接在对应需要的地方直接写逻辑即可
const loginState = useAppSelector(state => state.user.loginState)
const { search } = useLocation() 
  const redirectUrl = search.split('?r=')[1] 
  const str = redirectUrl ? redirectUrl : '/'
return (
 <Routes>
   {/* 
     路由v6版本中：关键点就在于 * ，代表 后续的路由的设定 交给 Index 组件处理
     路由v5版本中：不需要添加 *
     v5版本中 使用 Switch 代替 v6中的 Routes
     v5版本中 使用 component 属性代替  v6中的 element
   */}
   <Route path='/login' element={loginState ? <Navigate to={str} /> : <Login />}></Route>
   <Route path="/*" element={ loginState ? <Index /> : <Navigate to="/login"></Navigate>} />
 </Routes>
);
}

export default App;
